<template>

    <div class="line-title text-normal text-left font-bold" :class="[containerClass, { 'pad': hasPad }]">
        <!-- <span class="primary-color" :class="lineClass">——— </span> -->
        <!-- <span>&nbsp;{{value}}&nbsp;</span> -->
        <!-- <span class="primary-color" :class="lineClass"> ———</span> -->
        <div class="left-pad"></div>
        {{value}}
    </div>

</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';

@Component({
    name: 'LineTitle',
})
export default class LineTitle extends Vue {
    @Prop({
        type: String,
        required: true,
    })
    public value: any;

    /** 容器样式 */
    @Prop({
        type: [ Object, Array ],
    })
    public containerClass: any;

    /** 线条样式 */
    @Prop({
        type: [ Object, Array ],
    })
    public lineClass: any;

    @Prop({
        type: Boolean,
        default: false,
    })
    public hasPad: any;
}
</script>
<style lang="less">

@import "../../lib/style/mixins.less";

.line-title {
    position: relative;
    padding: 0rpx 12rpx;
    .left-pad {
        position: absolute;
        left: 0;
        top: 50%;
        width: 4rpx;
        height: 28rpx;
        transform: translateY(-50%);
        background: @primary-color;
    }
    &.pad {
        padding: 10px 12rpx;
    }
}

</style>
